<template>
	<div class="c-number">
		<div class="number-right">
			<div :class="['list-number-name', { active: activeIndex === index }]" v-for="(item, index) in pieList" :key="index">
				<div class="circle-d" :style="{ background: item.color }"></div>
				<div class="flex">
					<div class="number-n">{{ item.label }}</div>
					<div>
						<span>{{ item.value }}{{ item.unit }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
type RightNum = {
	pieList: any[];
	activeIndex: number | null;
};
withDefaults(defineProps<RightNum>(), {
	pieList: () => [],
	activeIndex: null
});
</script>

<style scoped lang="scss">
.c-number {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	.number-right {
		display: flex;
		flex-flow: column;
		.number-n {
			margin-right: 30px;
		}
	}
	.list-number-name {
		display: flex;

		// width: 150px;
		// padding-bottom: 18px;
		height: 50px;

		// text-align: left;
		&:last-child {
			padding-bottom: 0;
		}
		.circle-d {
			width: 7px;
			height: 7px;
			margin-top: 8px;
			margin-right: 8px;
			background: linear-gradient(180deg, #a1defa 0%, #5094f6 100%);
			border-radius: 50%;
		}
		&.active .circle-d {
			width: 7px;
			border-radius: 2px;
			animation: move 1s;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}
		@keyframes move {
			from {
				height: 7px;
			}
			to {
				height: 32px;
			}
		}
	}
}
</style>
